<!--
 * @Description: 文件用于
 * @Author: dezhi
 * @Date: 2022-07-10 18:34:54
 * @LastEditTime: 2022-07-10 21:48:18
 * @LastEditors: dezhi
-->
<template>
  <Widget class="text valid-code-input" v-bind="$props">
    <el-input
      class="code-input"
      v-model="codeVal"
      :disabled="disabled"
      v-bind="{
        placeholder,
      }"
      @input="setCodeVal"
    />
    <img v-if="image" :src="image" @click="refresh" />
  </Widget>
</template>
<script>
import { Widget } from "hb-full-cli";
import { ref, onMounted } from "vue";
export default Widget({
  name: "validInput",
  data() {
    return {
      codeVal: "",
    };
  },
  props: {
    placeholder: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup({ service, widget }, { hb }) {
    widget.value = widget.value || {
      key: "",
      code: "",
    };

    let image = ref(null);

    let refresh = async () => {
      if (service) {
        let { captcha, key } = await hb.service(service);
        widget.value.key = key;
        image.value = captcha;
      }
    };

    let setCodeVal = (val) => {
      widget.value.code = val;
    };
    onMounted(() => refresh());
    return {
      image,
      refresh,
      setCodeVal,
    };
  },
});
</script>
<style lang="scss">
.valid-code-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .code-input {
    flex: 1;
    height: 40px;
    margin-right: 10px;
  }
  img {
    width: 120px;
    height: 40px;
  }
}
</style>
